<template>
    <div>
        <!-- 注意，这里必须设置宽高，并且宽高不能都设置为100%，否则显示的是空白 -->
        <div id="china_map" style="width: 750px; height: 600px;"></div>
        
    </div>
</template>;
 
<script>
let labImg = require("@/assets/mapPopbg.png")
import * as echarts from "echarts";
import bg from "@/assets/mpbg.jpg"
// import china from "../../../node_modules/echarts/map/json/province/shandong.json";  //山东地图
import china from "./components/china.json";  //中国地图
echarts.registerMap("china", china);
export default {
    data() {
        return {
        };
    },
    mounted() {
        this.setMapData();
        this.$nextTick(() => {
            // if (this.chinachart == null) {
            this.setMapData();
            // }
        });

    },
    methods: {
        // 地图
        setMapData() {
            // 初始化echarts实例 #D8E9FD
            this.chinachart = echarts.init(document.getElementById("china_map"));
            // 进行相关配置
            this.chartOption = {

                // 左边图形控制器
                visualMap: {
                    show: true,
                    bottom: 20,
                    left: 0,
                    type: 'continuous',
                    // left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度
                    min: 0,
                    max: 500,
                    itemHeight: 100,  //图形的高度，即长条的高度。
                    calculable: true,//显示手柄
                    realtime: true,//拖拽手柄，更新数据
                    hoverLink: true,//悬浮高亮
                    color: [
                        '#ee6666',//红色
                        '#fc8452',//橙色
                        '#fac858',//黄色
                        '#9a60b4',//紫色
                        '#ea7ccc',//淡紫
                        '#3ba272',//绿色
                        '#91cc75',//浅绿
                        '#5470c6',//蓝色
                        '#73c0de',//淡蓝
                        '#fff',
                    ],
                    seriesIndex: 1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
                    dimension: 2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
                },
                geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解：
                    map: "china", // 表示中国地图
                    roam: true, // 是否开启鼠标缩放和平移漫游
                    zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
                    left: 'center',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: { //动态展示的样式
                            show: true,
                            color: '#fff',
                        },
                    },
                    select: {
                        label: {
                            show: false,
                            color: '#fff'
                        },
                        //相关配置项很多，可以参考echarts官网
                        itemStyle: {
                            borderColor: '',
                            areaColor: '#004593',//'rgba(59, 184, 247, 1)',
                            shadowColor: '',
                        }
                    },

                    itemStyle: {
                        normal: {
                            opacity: 1,
                            // areaColor:'#000000',
                            areaColor: {
                                image: bg,
                                repeat: 'repeat'
                            },
                            borderColor: '#00368C',
                        },
                        // 高亮状态下的配置
                        emphasis: {  // 地图区域的多边形 图形样式。
                            borderColor: "#000000",//未选中的状态
                            areaColor: "", //背景颜色
                            label: {
                                show: false, //显示名称
                            },
                            itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式
                                shadowBlur: 0,
                                // shadowColor: "rgba(0, 0, 0, 0.5)",
                                shadowColor: "",
                                borderColor: "",
                                areaColor: "",
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                        type: "map",
                        geoIndex: 0,
                        label: {
                            show: false,
                        },

                        // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接
                        // data: this.MapDataList,
                    },
                    {
                        type: "effectScatter", // 类型
                        coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
                        rippleEffect: {
                            brushType: "stroke"
                        },
                        label: {
                            normal: {
                                // show: true,
                                show: false,
                                padding: [7, 20],
                                color: '#fff',
                                // backgroundColor: "#1a3961",
                                // borderColor: '#aee9fb',
                                // borderWidth: 1,
                                // distance: 10,
                                position: 'top',
                                borderRadius: 6,
                                formatter: function (params) {
                                    return '{title|' + params.data.name + '}\n{abg|}\n{bTitle|· '
                                        + params.data.citys[0] + '}'
                                        + '{bTitle|· ' + params.data.citys[1] + '}'
                                        + '{bTitle|· ' + params.data.citys[2] + '}'
                                        + '{bTitle|· ' + params.data.citys[3] + '}\n'
                                        + '{contl|· 发车总数}'
                                        + '{contr| ' + params.data.fczsc + '}'
                                        + '{contl1|· 目的车辆}'
                                        + '{contr1| ' + params.data.mdclc + '}\n'
                                        + '{contl2|· 签收总数}'
                                        + '{contr2| ' + params.data.qszsc + '}'
                                        + '{contl3|· 已到车辆}'
                                        + '{contr3| ' + params.data.ydclc + '}'
                                },
                                rich: {
                                    title: {
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        padding: [-60, 0, 0, 20],
                                    },
                                    bTitle: {
                                        width: 50,
                                        fontSize: 16,
                                        lineHeight: 20,
                                        color: '#fff',
                                        padding: [-70, 0, 0, 15]
                                    },
                                    abg: {
                                        width: 270,
                                        height: 150,
                                        align: 'left',
                                        backgroundColor: {
                                            image: labImg,
                                        },
                                    },
                                    contl: {
                                        fontSize: 14,
                                        color: '#fff',
                                        padding: [-40, 0, 0, 25],
                                        width: 70,
                                    },
                                    contr: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-40, 0, 0, 0],
                                        width: 30
                                    },
                                    contl1: {
                                        fontSize: 14,
                                        color: '#fff',
                                        padding: [-40, 0, 0, 25],
                                        width: 50,
                                    },
                                    contr1: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-40, 0, 0, 25],
                                        width: 30

                                    },
                                    contl2: {
                                        fontSize: 14,
                                        color: '#fff',
                                        width: 60,
                                        padding: [-30, 0, 0, 25],

                                    },
                                    contr2: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-30, 0, 0, 8],
                                        width: 30

                                    },
                                    contl3: {
                                        fontSize: 14,
                                        color: '#fff',
                                        width: 60,
                                        padding: [-30, 0, 0, 25],

                                    },
                                    contr3: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-30, 0, 0, 8],
                                        width: 30

                                    }
                                },
                                textStyle: {
                                    align: 'left',
                                    lineHeight: 20,
                                }
                            },
                            emphasis: {
                                show: true,
                                padding: [7, 20],
                                color: '#fff',
                                // backgroundColor: "#1a3961",
                                // borderColor: '#aee9fb',
                                // borderWidth: 1,
                                distance: 20,
                                borderRadius: 6,
                                formatter: function (params) {
                                    return '{title|' + params.data.name + '}\n{abg|}\n{bTitle|· '
                                        + params.data.citys[0] + '}'
                                        + '{bTitle|· ' + params.data.citys[1] + '}'
                                        + '{bTitle|· ' + params.data.citys[2] + '}'
                                        + '{bTitle|· ' + params.data.citys[3] + '}\n'
                                        + '{contl|· 发车总数}'
                                        + '{contr| ' + params.data.value[2] + '}'
                                        + '{contl1|· 目的车辆}'
                                        + '{contr1| ' + params.data.value[3] + '}\n'
                                        + '{contl2|· 签收总数}'
                                        + '{contr2| ' + params.data.value[4] + '}'
                                        + '{contl3|· 已到车辆}'
                                        + '{contr3| ' + params.data.value[5] + '}'
                                },
                                rich: {
                                    title: {
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        padding: [-60, 0, 0, 20],
                                    },
                                    bTitle: {
                                        width: 50,
                                        fontSize: 16,
                                        lineHeight: 20,
                                        color: '#fff',
                                        padding: [-70, 0, 0, 15]
                                    },
                                    abg: {
                                        width: 270,
                                        height: 150,
                                        align: 'left',
                                        backgroundColor: {
                                            image: labImg,
                                        },
                                    },
                                    contl: {
                                        fontSize: 14,
                                        color: '#fff',
                                        padding: [-40, 0, 0, 25],
                                        width: 70,
                                    },
                                    contr: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-40, 0, 0, 0],
                                        width: 30
                                    },
                                    contl1: {
                                        fontSize: 14,
                                        color: '#fff',
                                        padding: [-40, 0, 0, 25],
                                        width: 50,
                                    },
                                    contr1: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-40, 0, 0, 25],
                                        width: 30

                                    },
                                    contl2: {
                                        fontSize: 14,
                                        color: '#fff',
                                        width: 60,
                                        padding: [-30, 0, 0, 25],

                                    },
                                    contr2: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-30, 0, 0, 8],
                                        width: 30

                                    },
                                    contl3: {
                                        fontSize: 14,
                                        color: '#fff',
                                        width: 60,
                                        padding: [-30, 0, 0, 25],

                                    },
                                    contr3: {
                                        fontSize: 14,
                                        color: '#02d2f6',
                                        padding: [-30, 0, 0, 8],
                                        width: 30

                                    }
                                },
                                textStyle: {
                                    align: 'left',
                                    lineHeight: 20,
                                }
                            }

                        },
                        // 系列中的数据内容数组。数组项通常为具体的数据项
                        data: [
                            { name: `长宁区`, value: [121.4222, 31.218123, 104, 2, 4, 70], citys: ['宁波', '杭州', '杭州', '浙江', '上海'], },
                            { name: `奉贤区`, value: [121.458472, 30.912345, 101, 2, 4, 70], citys: ['宁波', '杭州', '浙江', '上海'], },
                            { name: `奉贤区`, value: [80.458472, 30.912345, 1, 2, 4, 70], citys: ['宁波', '杭州', '杭州', '浙江', '上海'], }
                        ],
                    },
                    {
                        type: "effectScatter", // 类型
                        coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
                        rippleEffect: {
                            brushType: "stroke"
                        },
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                distance: 10,
                                padding: [7, 20],
                                color: '#fff',
                                backgroundColor: "#002587",
                                borderColor: '#aee9fb',
                                borderWidth: 1,
                                borderRadius: 2,
                                formatter: function (params) {
                                    return '{title|' + params.data.name + '}'
                                        + '{bTitle| 有新订单啦！}'
                                },
                                rich: {
                                    title: {
                                        fontSize: 13,
                                        color: '#00c794',
                                        padding: [0, 0, 0, -10]
                                    },
                                    bTitle: {
                                        width: 70,
                                        fontSize: 13,
                                        color: '#fff',
                                    },
                                },
                                textStyle: {
                                    align: 'left',
                                }
                            },

                        },
                        itemStyle: {
                            color: '#fac858'
                        },
                        // 系列中的数据内容数组。数组项通常为具体的数据项
                        data: [
                            { name: '济宁--潍坊', value: [100.4222, 31.218123] },
                        ],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示地图数据
            this.chinachart.setOption(this.chartOption);
        },
    }
}
</script>